<template>
	<view class="container">
		<view class="title">引用自定义组件</view>
		<view v-for="(data, index) in datalist" :key="index" class="card-item">
			<CustomTextView
				:title="data.title" 
				:isTop="data.isTop"
				:author="data.author"
				:comments="data.comments"
				:time="data.time"
			>
			</CustomTextView>
		</view>
	</view>
</template>

<script>
	import CustomTextView from "components/NewsView/NewsView.vue"
	export default {
		components:{
			CustomTextView
		},
		data() {
			return {
				datalist:[
					{
						title:"习近平结束出席亚太经合组织第三十二次领导人非正式会议和对韩国的国事访问回到北京",
						isTop:true,
						author:"新华社",
						comments:"82.9万",
						time:"2025-10101",
					},
					{
						title:"第7次“太空会师” 神舟二十一号航天员乘组顺利进驻“天宫”",
						isTop:false,
						author:"红星新闻",
						comments:"77万",
						time:"2025-11-02",
					},
					{
						title:"吸氧式逛街！上海一条500米小马路变宝藏绿洲！潮牌美食云集，还有一座限时粉色乐园！",
						isTop:false,
						author:"新民晚报",
						comments:"2000",
						time:"2025-10-08",
					},
					{
						title:"（外代一线）西班牙马德里一建筑垮塌致4人失踪",
						isTop:false,
						author:"新华社图片",
						comments:"66万",
						time:"2025-10-08",
					}
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
	.container {
		padding: 16px;
		background-color: #f5f7fa;
		min-height: 100vh;
		box-sizing: border-box;
	}
	
	.title {
		font-size: 20px;
		font-weight: bold;
		color: #333;
		margin-bottom: 20px;
		padding-bottom: 10px;
		border-bottom: 1px solid #eee;
	}
	
	.card-item {
		margin: 10px 0;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}
	
	.card-item:hover {
		transform: translateY(-3px);
	}
</style>
